<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI slider documentation</title>

	<style>
	body {
		font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
	}
	.gutter {
		display: none;
	}
	</style>
</head>
<body>

<script>{
		"title":
			"Slider Widget",
		"excerpt":
			"Drag a handle to select a numeric value.",
		"termSlugs": {
			"category": [
				"widgets"
			]
		}
	}</script><section class="quick-nav"><header><h2>QuickNav<a href="#entry-longdesc">Overview</a><a href="#entry-examples">Examples</a>
</h2></header><div class="quick-nav-section">
<h3>Options</h3>
<div><a href="#option-animate">animate</a></div>
<div><a href="#option-disabled">disabled</a></div>
<div><a href="#option-max">max</a></div>
<div><a href="#option-min">min</a></div>
<div><a href="#option-orientation">orientation</a></div>
<div><a href="#option-range">range</a></div>
<div><a href="#option-step">step</a></div>
<div><a href="#option-value">value</a></div>
<div><a href="#option-values">values</a></div>
</div>
<div class="quick-nav-section">
<h3>Methods</h3>
<div><a href="#method-destroy">destroy</a></div>
<div><a href="#method-disable">disable</a></div>
<div><a href="#method-enable">enable</a></div>
<div><a href="#method-option">option</a></div>
<div><a href="#method-value">value</a></div>
<div><a href="#method-values">values</a></div>
<div><a href="#method-widget">widget</a></div>
</div>
<div class="quick-nav-section">
<h3>Events</h3>
<div><a href="#event-create">create</a></div>
<div><a href="#event-start">start</a></div>
<div><a href="#event-slide">slide</a></div>
<div><a href="#event-change">change</a></div>
<div><a href="#event-stop">stop</a></div>
</div></section><article id="slider1" class="entry widget"><h2 class="section-title">
<span>Slider Widget</span><span class="version-details">version added: 1.5</span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>Description: </strong>Drag a handle to select a numeric value.</p>
<section id="options"><header><h2 class="underline">Options</h2></header><div id="option-animate" class="api-item first-item">
<h3>animate<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types#String">String</a> or <a href="http://api.jquery.com/Types#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>Whether to slide the handle smoothly when the user clicks on the slider track. Also accepts any valid <a href="//api.jquery.com/animate/#duration">animation duration</a>.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Boolean</strong>: When set to <code>true</code>, the handle will animate with the default duration.</li>
<li>
<strong>String</strong>: The name of a speed, such as <code>"fast"</code> or <code>"slow"</code>.</li>
<li>
<strong>Number</strong>: The duration of the animation, in milliseconds.</li>
</ul>
</div>
<div id="option-disabled" class="api-item">
<h3>disabled<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>Disables the slider if set to <code>true</code>.</div>
<strong>Code examples:</strong><p>Initialize the slider with the disabled option specified:</p>
<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).slider({ disabled: </code><code class="keyword">true</code> <code class="plain">});</code></div></div></td></tr></tbody></table></div>
<p>Get or set the disabled option, after initialization:</p>
<div class="syntaxhighlighter nogutter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// getter</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">disabled = $( </code><code class="string">".selector"</code> <code class="plain">).slider( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code> <code class="plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="comments">// setter</code></div><div class="line number5 index4 alt2"><code class="plain">$( </code><code class="string">".selector"</code> <code class="plain">).slider( </code><code class="string">"option"</code><code class="plain">, </code><code class="string">"disabled"</code><code class="plain">, </code><code class="keyword">true</code> <code class="plain">);</code></div></div></td></tr></tbody></table></div>
</div>
<div id="option-max" class="api-item">
<h3>max<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>100</code>
</div>
<div>The maximum value of the slider.</div>
</div>
<div id="option-min" class="api-item">
<h3>min<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>0</code>
</div>
<div>The minimum value of the slider.</div>
</div>
<div id="option-orientation" class="api-item">
<h3>orientation<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>"horizontal"</code>
</div>
<div>Determines whether the slider handles move horizontally (min on left, max on right) or vertically (min on bottom, max on top). Possible values: <code>"horizontal"</code>, <code>"vertical"</code>.</div>
</div>
<div id="option-range" class="api-item">
<h3>range<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types#String">String</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>false</code>
</div>
<div>Whether the slider represents a range.</div>
<strong>Multiple types supported:</strong><ul>
<li>
<strong>Boolean</strong>: If set to <code>true</code>, the slider will detect if you have two handles and create a stylable range element between these two.</li>
<li>
<strong>String</strong>: Either <code>"min"</code> or <code>"max"</code>. A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.</li>
</ul>
</div>
<div id="option-step" class="api-item">
<h3>step<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>1</code>
</div>
<div>Determines the size or amount of each interval or step the slider takes between the min and max. The full specified value range of the slider (max - min) should be evenly divisible by the step.</div>
</div>
<div id="option-value" class="api-item">
<h3>value<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Number">Number</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>0</code>
</div>
<div>Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.</div>
</div>
<div id="option-values" class="api-item">
<h3>values<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types#Array">Array</a></span>
</h3>
<div class="default">
<strong>Default: </strong><code>null</code>
</div>
<div>This option can be used to specify multiple handles. If the <a href="#option-range"><code>range</code></a> option is set to <code>true</code>, the length of <code>values</code> should be 2.</div>
</div></section><section id="methods"><header><h2 class="underline">Methods</h2></header><div id="method-destroy"><div class="api-item first-item">
<h3>destroy()</h3>
<div>
		Removes the slider functionality completely. This will return the element back to its pre-init state.
	</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
</div></div>
<div id="method-disable"><div class="api-item">
<h3>disable()</h3>
<div>
		Disables the slider.
	</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
</div></div>
<div id="method-enable"><div class="api-item">
<h3>enable()</h3>
<div>
		Enables the slider.
	</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
</div></div>
<div id="method-option">
<div class="api-item">
<h3>option( optionName ) <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#Object">Object</a></span>
</h3>
<div>Gets the value currently associated with the specified <code>optionName</code>.</div>
<ul><li>
<div><strong>optionName</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
</div>
<div>The name of the option to get.</div>
</li></ul>
</div>
<div class="api-item">
<h3>option() <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#PlainObject">PlainObject</a></span>
</h3>
<div>Gets an object containing key/value pairs representing the current slider options hash.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
</div>
<div class="api-item">
<h3>option( optionName, value )</h3>
<div>Sets the value of the slider option associated with the specified <code>optionName</code>.</div>
<ul>
<li>
<div><strong>optionName</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#String">String</a>
</div>
<div>The name of the option to set.</div>
</li>
<li>
<div><strong>value</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
</div>
<div>A value to set for the option.</div>
</li>
</ul>
</div>
<div class="api-item">
<h3>option( options )</h3>
<div>Sets one or more options for the slider.</div>
<ul><li>
<div><strong>options</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
</div>
<div>A map of option-value pairs to set.</div>
</li></ul>
</div>
</div>
<div id="method-value">
<div class="api-item">
<h3>value() <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div>Get the value of the slider.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
</div>
<div class="api-item">
<h3>value( value )</h3>
<div>Set the value of the slider.</div>
<ul><li>
<div><strong>value</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
</div>
<div>The value to set.</div>
</li></ul>
</div>
</div>
<div id="method-values">
<div class="api-item">
<h3>values() <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#Array">Array</a></span>
</h3>
<div>Get the value for all handles.</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
</div>
<div class="api-item">
<h3>values( index ) <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#Number">Number</a></span>
</h3>
<div>Get the value for the specified handle.</div>
<ul><li>
<div><strong>index</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Integer">Integer</a>
</div>
<div>The zero-based index of the handle.</div>
</li></ul>
</div>
<div class="api-item">
<h3>values( index, value )</h3>
<div>Set the value for the specified handle.</div>
<ul>
<li>
<div><strong>index</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Integer">Integer</a>
</div>
<div>The zero-based index of the handle.</div>
</li>
<li>
<div><strong>value</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
</div>
<div>The value to set.</div>
</li>
</ul>
</div>
<div class="api-item">
<h3>values( values )</h3>
<div>Set the value for all handles.</div>
<ul><li>
<div><strong>values</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Array">Array</a>
</div>
<div>The values to set.</div>
</li></ul>
</div>
</div>
<div id="method-widget"><div class="api-item">
<h3>widget() <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h3>
<div>
		Returns a <code>jQuery</code> object containing the slider.
	</div>
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
</div></div></section><section id="events"><header><h2 class="underline">Events</h2></header><div id="event-change" class="api-item first-item">
<h3>change( event, ui )</h3>
<div>Triggered after the user slides a handle, if the value has changed; or if the value is changed programmatically via the <a href="#method-value"><code>value</code></a> method.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>handle</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
</div>
<div>The jQuery object representing the handle that was changed.</div>
</li>
<li>
<div><strong>value</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
</div>
<div>The current value of the slider.</div>
</li>
</ul>
</li>
</ul>
</div>
<div id="event-create" class="api-item">
<h3>create( event, ui )</h3>
<div>
		Triggered when the slider is created.
	</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
</div>
<div></div>
</li>
</ul>
</div>
<div id="event-slide" class="api-item">
<h3>slide( event, ui )</h3>
<div>Triggered on every mouse move during slide. The value provided in the event as <code>ui.value</code> represents the value that the handle will have as a result of the current movement. Canceling the event will prevent the handle from moving and the handle will continue to have its previous value.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>handle</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
</div>
<div>The jQuery object representing the handle being moved.</div>
</li>
<li>
<div><strong>value</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
</div>
<div>The value that the handle will move to if the event is not canceled.</div>
</li>
<li>
<div><strong>values</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Array">Array</a>
</div>
<div>An array of the current values of a multi-handled slider.</div>
</li>
</ul>
</li>
</ul>
</div>
<div id="event-start" class="api-item">
<h3>start( event, ui )</h3>
<div>Triggered when the user starts sliding.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>handle</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
</div>
<div>The jQuery object representing the handle being moved.</div>
</li>
<li>
<div><strong>value</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
</div>
<div>The current value of the slider.</div>
</li>
</ul>
</li>
</ul>
</div>
<div id="event-stop" class="api-item">
<h3>stop( event, ui )</h3>
<div>Triggered after the user slides a handle.</div>
<ul>
<li>
<div><strong>event</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Event">Event</a>
</div>
<div></div>
</li>
<li>
<div><strong>ui</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Object">Object</a>
</div>
<div></div>
<ul>
<li>
<div><strong>handle</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#jQuery">jQuery</a>
</div>
<div>The jQuery object representing the handle that was moved.</div>
</li>
<li>
<div><strong>value</strong></div>
<div>Type: <a href="http://api.jquery.com/Types#Number">Number</a>
</div>
<div>The current value of the slider.</div>
</li>
</ul>
</li>
</ul>
</div></section><div class="longdesc" id="entry-longdesc">
		<p>The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles and ranges. The handle can be moved with the mouse or the arrow keys.</p>

		<p>The slider widget will create handle elements with the class <code>ui-slider-handle</code> on initialization. You can specify custom handle elements by creating and appending the elements and adding the <code>ui-slider-handle</code> class before initialization. It will only create the number of handles needed to match the length of <a href="#option-value"><code>value</code></a>/<a href="#option-values"><code>values</code></a>. For example, if you specify <code>values: [ 1, 5, 18 ]</code> and create one custom handle, the plugin will create the other two.</p>
	</div>
<h3>Additional Notes:</h3>
<div class="longdesc"><ul><li>
			This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
		</li></ul></div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">Example:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">A simple jQuery UI Slider.</span></h4>
<div class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div><div class="line number20 index19 alt1">20</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">&lt;!doctype html&gt;</code></div><div class="line number2 index1 alt1"><code class="plain">&lt;</code><code class="keyword">html</code> <code class="color1">lang</code><code class="plain">=</code><code class="string">"en"</code><code class="plain">&gt;</code></div><div class="line number3 index2 alt2"><code class="plain">&lt;</code><code class="keyword">head</code><code class="plain">&gt;</code></div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">meta</code> <code class="color1">charset</code><code class="plain">=</code><code class="string">"utf-8"</code><code class="plain">&gt;</code></div><div class="line number5 index4 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">title</code><code class="plain">&gt;slider demo&lt;/</code><code class="keyword">title</code><code class="plain">&gt;</code></div><div class="line number6 index5 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">link</code> <code class="color1">rel</code><code class="plain">=</code><code class="string">"stylesheet"</code> <code class="color1">href</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css</a>"</code><code class="plain">&gt;</code></div><div class="line number7 index6 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">style</code><code class="plain">&gt;#slider { margin: 10px; }&nbsp; &lt;/</code><code class="keyword">style</code><code class="plain">&gt;</code></div><div class="line number8 index7 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/jquery-1.8.2.js">http://code.jquery.com/jquery-1.8.2.js</a>"</code><code class="plain">&gt;&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number9 index8 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">script</code> <code class="color1">src</code><code class="plain">=</code><code class="string">"<a href="http://code.jquery.com/ui/1.9.1/jquery-ui.js">http://code.jquery.com/ui/1.9.1/jquery-ui.js</a>"</code><code class="plain">&gt;&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number10 index9 alt1"><code class="plain">&lt;/</code><code class="keyword">head</code><code class="plain">&gt;</code></div><div class="line number11 index10 alt2"><code class="plain">&lt;</code><code class="keyword">body</code><code class="plain">&gt;</code></div><div class="line number12 index11 alt1">&nbsp;</div><div class="line number13 index12 alt2"><code class="plain">&lt;</code><code class="keyword">div</code> <code class="color1">id</code><code class="plain">=</code><code class="string">"slider"</code><code class="plain">&gt;&lt;/</code><code class="keyword">div</code><code class="plain">&gt;</code></div><div class="line number14 index13 alt1">&nbsp;</div><div class="line number15 index14 alt2"><code class="plain">&lt;</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number16 index15 alt1"><code class="plain">$( "#slider" ).slider();</code></div><div class="line number17 index16 alt2"><code class="plain">&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></div><div class="line number18 index17 alt1">&nbsp;</div><div class="line number19 index18 alt2"><code class="plain">&lt;/</code><code class="keyword">body</code><code class="plain">&gt;</code></div><div class="line number20 index19 alt1"><code class="plain">&lt;/</code><code class="keyword">html</code><code class="plain">&gt;</code></div></div></td></tr></tbody></table></div>
<h4>Demo:</h4>
<div class="demo code-demo" data-height="50"></div>
</div></section>
</div></article>

</body>
</html>
